<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部腐蚀监测腐蚀深度曲线</title>
</head>

<body>
    <img src="{{url_for('static',filename='img/sign3.png')}}" />
    <div class="title">
        局部腐蚀监测腐蚀深度曲线
    </div>
    <div class="zong">
        <!-- 总div -->
        <div>
            <!-- 空白区，设立高度 -->
        </div>


        <div>
            <!-- 中央主处理区 -->
            <div>
                <!-- 图形区 -->
                <div class="three">
                    <div class="shuli">
                        <!-- 图形区左文字 -->
                        腐蚀深度（um）
                    </div>
                    <div class="echart0">
                        <!-- 图形区正中央 -->
                        <ECharts ref="chart" :option="option" />
                    </div>
                    <div class="shuli">
                        <!-- 图形区右文字 -->
                        腐蚀深度因子
                    </div>
                </div>
                <div class="time">
                    <!-- 时间 -->
                    时间
                </div>
            </div>
            <div class="border">
                <!-- 数据显示区 -->

            </div>
            <div class="status">
                <!-- 按钮区 -->
                <input type="button" value="通讯状态" class="btn2" onclick="window.location.href='{{url_for('FirstFage')}}'">
                <input type="button" value="腐蚀速率" class="btn2" onclick="window.location.href='{{url_for('speed')}}'">
                <input type="button" value="阴极保护" class="btn2" onclick="window.location.href='{{url_for('protect')}}'">
                <!--<input type="button" value="监测数据" class="btn2" onclick="">-->
                <input type="button" value="腐蚀因子" class="btn2" onclick="">
                <input type="button" value="阴极检测曲线" class="btn2" onclick="">
            </div>
        </div>

        <div class="kong">

        </div>
        <div class="checkbox">
            <!-- 右侧复选框区 -->
            <div class="right">
                <!-- 最大腐蚀速率 -->
                最大腐蚀速率
                <input type="button" value="1" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="2" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="3" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="4" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="5" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="6" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="7" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="8" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="9" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="10" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="11" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="12" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="13" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="14" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="15" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="16" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="17" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="18" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="19" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="20" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="21" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="22" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="23" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="24" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="25" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="26" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="27" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="28" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="29" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="30" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="31" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="32" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
            </div>
            <div class="right">
                <!-- 均匀腐蚀速率 -->
                均匀腐蚀速率
                <input type="button" value="1" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="2" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="3" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="4" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="5" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="6" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="7" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="8" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="9" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="10" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="11" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="12" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="13" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="14" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="15" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="16" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="17" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="18" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="19" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="20" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="21" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="22" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="23" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="24" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="25" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="26" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="27" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="28" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="29" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="30" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="31" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="32" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
            </div>
            <div class="right">
                <!-- 腐蚀速率因子 -->
                腐蚀速率因子
                <input type="button" value="1" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="2" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="3" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="4" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="5" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="6" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="7" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="8" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="9" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="10" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="11" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="12" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="13" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="14" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="15" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="16" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="17" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="18" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="19" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="20" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="21" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="22" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="23" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="24" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="25" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="26" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="27" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="28" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="29" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="30" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="31" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
                <input type="button" value="32" onclick="" style="width:1px;height:1px;border-radius: 50%;box-shadow: none;background: none;">
            </div>
        </div>
    </div>
    <div class="back1">
        宁波科金工业腐蚀监测技术有限公司
    </div>
    <div class="back2">
        Ningbo Kejin Industry Corrosion Monitoring Technology Ltd.
    </div>
</body>
<script>
    import {
        createComponent
    } from 'echarts-for-vue';
    import * as echarts from 'echarts';
</script>
<style>
    .title {
        text-align: center;
        font-size: 45px;
    }
    
    .zong {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .three {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .shuli {
        writing-mode: vertical-rl;
    }
    
    .time {
        height: 21px;
        width: 800px;
        text-align: right;
        margin: auto
    }
    
    .status {
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center
    }
    
    .kong {
        width: 50px
    }
    
    .right {
        writing-mode: vertical-rl;
    }
    
    .checkbox {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    .btn2 {
        height: 40px;
        width: 100px;
        border-radius: 50%;
        font-size: 15px;
        margin-left: 30px;
        border-width: 1px
    }
    
    .back1 {
        position: relative;
        top: 50px;
        font-size: 25px;
        text-align: center;
    }
    
    .back2 {
        top: 55px;
        position: relative;
        font-size: 25px;
        text-align: center;
    }
    
    .echart0 {
        width: 800px;
        height: 200px;
        border: solid 1px;
    }
    
    .border {
        width: 800px;
        height: 200px;
        border: solid 1px;
        margin: auto;
        margin-top: 40px
    }
</style>

</html>